import React from 'react';
import './CategoryButtons.css';

interface CategoryButton {
  id: string;
  label: string;
  icon: string; // emoji
}

const categories: CategoryButton[] = [
  { id: 'all', label: '全部分类', icon: '☰' },
  { id: 'xiaohongshu', label: '小红书', icon: '📕' },
  { id: 'dashu', label: '大暑', icon: '🥭' },
  { id: 'official-account', label: '公众号首图', icon: '🔥' },
  { id: 'invitation', label: '邀请函', icon: '💌' },
  { id: 'countdown', label: '倒计时', icon: '⏳' },
  { id: 'daily-sign', label: '日签', icon: '❣️' },
  { id: 'good-news', label: '喜报', icon: '🏆' },
];

const CategoryButtons: React.FC = () => {
  const [selected, setSelected] = React.useState('all');

  const handleCategoryClick = (categoryId: string) => {
    setSelected(categoryId);
    // 这里可以添加分类点击的处理逻辑
  };

  return (
    <div className="category-section">
      <div className="category-buttons">
        {categories.map((category) => (
          <button
            key={category.id}
            className={`category-btn${selected === category.id ? ' selected' : ''}`}
            onClick={() => handleCategoryClick(category.id)}
            type="button"
          >
            <span className="category-emoji" style={{ fontSize: 18, marginRight: 6 }}>{category.icon}</span>
            {category.label}
          </button>
        ))}
      </div>
    </div>
  );
};

export default CategoryButtons; 